<template>
  <div class="main">
    <ImgUploadManage
      style="width: 100%"
      :businessId="skuId"
      type="9"
      wrap
      :uploadLimit="10"
      :limit="50"
      :disabled="disabled"
      :fileList.sync="fileList"
      permission="distribution:skuDistributor:uploadSkuBatchImages"
    />

    <el-empty v-if="!fileList && disabled" description="暂无数据"></el-empty>


    <div style="text-align: right; margin-top: 15px" v-show="!disabled">
      <el-button type="primary" @click="submitForm" v-hasPermi="['distribution:skuDistributor:uploadSkuBatchImages']">
        {{ $t('保存') }}
      </el-button>
    </div>
  </div>
</template>

<script>
import { getSkuBatchImages, uploadSkuBatchImages } from '@/api/distribution/sku/referenceImage'
export default {
  data() {
    return {
      fileList: '',
      originFileList: '',
    }
  },

  props: {
    /**
     * 是否禁用
     */
    disabled: {
      type: Boolean,
      default: () => false,
    },
    skuId: {
      type: String,
      default: '',
    },
  },
  mounted() {
    this.getList()
  },

  methods: {
    // 验证数据是否改变
    validFormData() {
      return this.originFileList !== this.fileList
    },
    /**查询sku图片列表 */
    getList() {
      getSkuBatchImages({ skuId: this.skuId, type: '1' }).then((res) => {
        this.fileList = res.data?.map((i) => i.imgUrl)?.toString()
        this.originFileList = res.data?.map((i) => i.imgUrl)?.toString()
      })
    },

    submitForm() {
      const formData = new FormData()
      formData.append('imgUrls', this.fileList)
      formData.append('skuId', this.skuId)
      uploadSkuBatchImages(formData, this.skuId, 1).then((res) => {
        this.$message({
          type: 'success',
          message: res.msg,
        })
        this.getList()
      })
    },
    cancel() {},
  },
  watch: {},
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
}
</style>
